import React, { useEffect, useState, createContext, Children } from 'react';
import { Table, Badge, Button, Space, Card, Form, Input, Pagination, Modal, Tabs, InputNumber, message } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import EditModal from './components/editModal'
import AddModal from './components/addModal';
import Updata from '../updata'
import UpdataFibsem from '../updata/Fibsem'
import UpdataQemscan from '../updata/Qemscan'
import './index.css'

const { TabPane } = Tabs

export const sampleContext = createContext()
const { Column, ColumnGroup } = Table;

const theProps = (state) => {
    return {
        sample: state.sample,
        total: state.sample.total
    }
}

const pageLimit = 5

function Sample(props) {
    const { sample, dispatch, total } = props;
    const [editId, setEditId] = useState(1);
    const [visible, setVisible] = useState();
    const [updataVisible, setUpdataVisible] = useState(false);
    const [updataType, setUpdataType] = useState(0);
    const [ratioValue, setRadio] = useState(0)
    const [addVisible, setAddVisible] = useState(false)
    const [picRadio, setPicRadio] = useState(0)
    const [current, setCurrent] = useState(1)

    useEffect(() => {
        dispatch({
            type: 'sample/getSample',
            payload: {
                current: 1,
                limit: pageLimit
            }
        })
    }, [dispatch]);

    const getImageState = (state, url, id) => {
        switch (url) {
            case 'maps':
                return (
                    <div>
                        {id?.a == 1 ? <a
                            onClick={() => {
                                dispatch({
                                    type: 'taskmanage/reqMapsInfoToTask',
                                    payload: id.id
                                })
                                dispatch({
                                    type: 'task/saveCurrent',
                                    payload: 2
                                })
                            }}
                        >
                            <Button type='primary' size='small'>孔缝</Button>
                        </a> : ''}
                        {id?.b == 1 ? <a
                            onClick={() => {
                                dispatch({
                                    type: 'taskmanage/reqMineInfoToTask',
                                    payload: id.id
                                })
                                dispatch({
                                    type: 'task/saveCurrent',
                                    payload: 2
                                })
                            }}
                        >
                            <Button type='primary' size='small'>矿物</Button>
                        </a> : ''}

                        {state > 0
                            ? <a
                                onClick={() => {
                                    dispatch({
                                        type: 'maps/changeMapsId',
                                        payload: id?.id
                                    })
                                    router.push({
                                        pathname: `/work/${url}`,
                                        search: `${id?.id}`,
                                        // query:{
                                        //     'id': `${id}`,
                                        // }
                                    });
                                }}
                            ><Button type='primary' size='small' danger>查看</Button></a>
                            : <Button size='small' disabled>未上传</Button>}
                    </div>
                )
                break;

            case 'fibsem':
                return (
                    <div>
                        {
                            id?.d == 1 ?
                                <Button type='primary' size='small' onClick={() => {
                                    message.loading('下载中',3)
                                    let dispatchData = {
                                        id: id?.id,
                                        type: 4
                                    }
                                    dispatch({
                                        type: 'echarts/downloadFile',
                                        payload: dispatchData
                                    })
                                }} >下载</Button> : ''
                        }
                        {
                            state > 0
                                ? <a
                                    onClick={() => {
                                        dispatch({
                                            type: 'maps/changeMapsId',
                                            payload: id?.id
                                        })
                                        router.push({
                                            pathname: `/work/${url}`,
                                            search: `${id?.id}`,
                                            // query:{
                                            //     'id': `${id}`,
                                            // }
                                        });
                                    }}
                                ><Button type='primary' size='small' danger>查看</Button></a>
                                : <Button size='small' disabled>未上传</Button>
                        }
                    </div>

                )
                break;
            case 'qemscan':
                return (
                    <div>
                        {
                            id?.c == 1 ?
                                <Button type='primary' size='small' onClick={() => {
                                    let dispatchData = {
                                        id: id?.id,
                                        type: 3
                                    }
                                    dispatch({
                                        type: 'echarts/downloadFile',
                                        payload: dispatchData
                                    })
                                }} >下载</Button> : ''
                        }
                        {
                            state > 0
                                ? <a
                                    onClick={() => {
                                        dispatch({
                                            type: 'maps/changeMapsId',
                                            payload: id?.id
                                        })
                                        router.push({
                                            pathname: `/work/${url}`,
                                            search: `${id?.id}`,
                                            // query:{
                                            //     'id': `${id}`,
                                            // }
                                        });
                                    }}
                                ><Button type='primary' size='small' danger>查看</Button></a>
                                : <Button size='small' disabled>未上传</Button>
                        }
                    </div>
                )
                break;
        }

    }

    const imgStateSet = {
        width: `3em`,
        align: 'center',
    }

    const edit = id => {
        setEditId(id);
        setVisible(true);
    }
    const updata = (id) => {
        setUpdataVisible(true)
        dispatch({
            type: 'sample/saveUpdataId',
            payload: id
        })
    }

    const deleteSample = (id) => {
        dispatch({
            type: 'sample/deleteSample',
            payload: id
        })
        dispatch({
            type: 'sample/getSample',
            payload: {
                current: current,
                limit: pageLimit
            }
        })
    }

    const updataTypeOnChange = value => {
        setUpdataType(value)
    }

    const lableStyle = {
        display: 'inline-block', width: '20px', marginLeft: '20px'
    }

    const style = {
        display: 'inline-block', marginLeft: 20, width: '100px'
    }

    const formItemList = () => {
        let children = []
        let childrenName = ['name', 'wellBlock', 'wellNum', 'wellLayer', 'wellDeep']
        let childrenCHN = ['名称', '井区', '井号', '层位', '井深']
        for (let i = 0; i < childrenCHN.length; i++) {
            children.push(
                <>
                    <Form.Item
                        style={lableStyle}
                    >
                        <span>{childrenCHN[i] + '：'}</span>
                    </Form.Item>
                    <Form.Item
                        name={childrenName[i]}
                        style={style}
                    >
                        <Input placeholder="Input birth year" />
                    </Form.Item>
                </>
            )
        }
        return children
    }

    const onFinish = (e) => {
        dispatch({
            type: 'sample/classifier',
            payload: e
        })
    }

    const handleOk = () => {
        let data;
        if (picRadio != 0) {
            data = {
                sort: updataType,
                radio: ratioValue,
                picRadio: picRadio
            }
        } else {
            data = {
                sort: updataType,
                radio: ratioValue,
            }
        }
        dispatch({
            type: 'sample/bindSampleid',
            payload: data
        })
        setUpdataVisible(false);
    };

    const handleCancel = () => {
        setUpdataVisible(false);
    };

    const getInputValue = value => {
        console.log(value)
        setRadio(value)
    }

    const getRadioValue = value => {
        setPicRadio(value.target.value)
    }

    const handleAdd = () => {
        setAddVisible(true)
    }

    const onChange = (page) => {
        setCurrent(page)
        dispatch({
            type: 'sample/getSample',
            payload: {
                current: page,
                limit: pageLimit
            }
        })
    };
    const title = () => (
        <Form
            name="complex-form"
            onFinish={onFinish}
            style={{ paddingTop: '20px' }}
        >
            {/* <Form.Item style={{ width: 250 }}> */}
            <Form.Item
                style={{ display: 'inline-block', width: '20px', margin: 0 }}
            >
                <span>区块：</span>
            </Form.Item>
            <Form.Item
                name='region'
                style={style}
            >
                <Input placeholder="Input birth year" />
            </Form.Item>
            {formItemList()}
            <Form.Item
                style={{ display: 'inline-block', marginLeft: 20 }}
            >
                <Button type="primary" htmlType="submit">
                    搜索
                </Button>
            </Form.Item>
            {/* </Form.Item> */}
        </Form>
    )
    return (
        <div>
            <Card
                title={title()}
                extra={<Button type="primary" onClick={handleAdd}>
                    添加
                </Button>}
            >
                <Table dataSource={sample.sample} pagination={false}>
                    <Column
                        width={`8em`}
                        align='center'
                        title="样品编号"
                        dataIndex="id"
                        key="id"
                    />
                    <Column width={`10em`} align='center' title="样品名称" dataIndex="name" key="name" />
                    <Column width={`8em`} align='center' title="区块" dataIndex="region" key="region" />
                    <Column width={`8em`} align='center' title="井区" dataIndex="wellBlock" key="wellBlock" />
                    <Column width={`8em`} align='center' title="井号" dataIndex="wellNum" key="wellNum" />
                    <Column width={`8em`} align='center' title="层位" dataIndex="wellLayer" key="wellLayer" />
                    <Column width={`8em`} align='center' title="井深" dataIndex="wellDeep" key="wellDeep" />
                    <Column width={`18em`} align='center' title="样品性质" dataIndex="info" key="info" />
                    <Column {...imgStateSet} width={`8em`} title="Maps" dataIndex="maps" key="maps" render={(state, item) => (getImageState(state, 'maps', item))} />
                    <Column {...imgStateSet} width={`8em`} title="FIB-SEM" dataIndex="fibsem" key="fibsem" render={(state, item) => (getImageState(state, 'fibsem', item))} />
                    <Column {...imgStateSet} width={`8em`} title="QEMSCAN" dataIndex="qemscan" key="qemscan" render={(state, item) => (getImageState(state, 'qemscan', item))} />
                    <Column
                        width={`10em`}
                        align='center'
                        title="操作"
                        dataIndex="id"
                        key="id"
                        render={
                            id => (
                                <Space style={{ float: 'center' }} size="middle">
                                    <a onClick={
                                        () => edit(id)
                                    }>编辑</a>
                                    <a onClick={
                                        () => updata(id)
                                    }>上传</a>
                                    <a style={{ color: 'red' }} onClick={
                                        () => deleteSample(id)
                                    }>删除</a>
                                </Space>
                            )
                        } />
                </Table>
                <Pagination style={{ float: 'right', marginTop: '15px' }} defaultPageSize={5} current={current} onChange={onChange} total={total} />
                <sampleContext.Provider value={{
                    id: editId,
                    visible: visible,
                    setVisible: setVisible,
                    // region: sample[editId - 1]?.region,
                    // wellBlock: sample[editId - 1]?.wellBlock,
                    // wellDeep: sample[editId - 1]?.wellDeep,
                    // wellLayer: sample[editId - 1]?.wellLayer,
                    // wellNum: sample[editId - 1]?.wellNum,
                    // info: sample[editId - 1]?.info
                    sample: sample
                }}>
                    <EditModal />
                </sampleContext.Provider>
                <Modal
                    title="文件上传"
                    footer={[
                        <>
                            <span style={{ marginRight: '2px' }}>比例尺</span>
                            <InputNumber
                                defaultChecked='0'
                                min='0'
                                parser={text => /^\d+$/.test(text) ? text : message.error('请输入正整数')}
                                style={{ width: '100px', paddingRight: '10px' }}
                                onChange={getInputValue}

                            />
                            <Button key="submit" type="primary" onClick={handleOk}>
                                提交
                            </Button>
                        </>
                    ]}
                    onCancel={() => {
                        setUpdataVisible(false)
                    }}
                    visible={updataVisible}
                   
                >
                    <div>
                        {/* <Tabs defaultActiveKey="1" centered style={{ paddingRight: '1em', marginBottom: '10px' }}>
                            <Tabpane tab="Maps" key="1">
                                Maps
                            </Tabpane>
                            <Tabpane tab="Fibsem" key="2">
                                FIB-SEM
                            </Tabpane>
                            <Tabpane tab="Qemscan" key="3">
                                QEMSCAN
                            </Tabpane>
                        </Tabs> */}
                        <Tabs defaultActiveKey="1" centered onChange={updataTypeOnChange}>
                            <TabPane tab="Maps" key="1">
                                <Updata />
                                <div></div>
                            </TabPane>
                            <TabPane tab="Fib-sem" key="2">
                                <UpdataFibsem />
                            </TabPane>
                            <TabPane tab="Qemscan" key="3">
                                <UpdataQemscan />
                                <Input placeholder='图片偏光度' style={{ width: '100px', paddingTop: '10px', marginLeft: '35%' }} onChange={getRadioValue} />
                            </TabPane>
                        </Tabs>

                    </div>
                </Modal>
                <sampleContext.Provider
                    value={{
                        visible: addVisible,
                        setVisible: setAddVisible,
                        type: updataType,
                        current: current
                    }}
                >
                    <AddModal />
                </sampleContext.Provider>
            </Card>

        </div >
    )
}


export default connect(theProps, null)(Sample)